<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 虚拟DOM 本质是一个对象, 描述DOM树节点关系, 为Vue渲染成真正的DOM做准备
    // diff算法: 新旧虚拟DOM比较, 从根节点比较, 如果根节点一样,比较属性,属性不一样就更新属性,再比较子节点...依次类推
    //           如果根节点不一样, 全部重建
    // 面试题: v-for :key的作用是什么? 没有key或者key值索引容易造成页面渲染的数据混乱问题  有key要写唯一的数值或者字符串,用来提高虚拟DOM的更新性能

    const obj1 = {
      type: "div",
      attributes: [
        { class: 'box' },
      ],
      text: '我是一段文字'
    }
    const obj2 = {
      type: "h1",
      attributes: [
        { class: 'box' },
        { id: 'hello' }
      ],
      text: '我是一段文字'
    }
    // 用上面的数据生成一个div标签
    // 交给VM层来渲染的
    let el;
    for (let key in obj) {
      if (key == 'type') {
        // 创建元素
        el = document.createElement(obj.type)
        document.body.appendChild(el)
      }
      if (key == 'attributes') {
        // 添加属性
        // div.setAttribute('src', 'http://www.bao.com/1.jpg') // <div src="http://www.bao.com/1.jpg"></div>
        for (let i = 0; i < obj.attributes.length; i++) {
          for (let key in obj.attributes[i]) {
            el.setAttribute(key, obj.attributes[i][key]) // <div class="box" id="hello"></div>
          }
        }
      }
      if (key == 'text') {
        el.innerText = obj[key]
      }
    }
  </script>
</body>

</html>